<template>
  <div class="execution">
    <basic-container>
      <avue-crud ref="crud"
                 :page="page"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 @on-load="getList"
                 @refresh-change="refreshChange"
                 @search-change="searchChange"
                 @row-update="handleUpdate"
                 @row-save="handleSave"
                 @row-del="rowDel">
        <template slot-scope="scope" slot="menu">
          <el-button type="text"
                     icon="el-icon-document"
                     size="mini"
                     plain
                     @click="showTemplateCodeHisDialog(scope.row,scope.index)">历史版本
          </el-button>
          <el-button type="text"
                     icon="el-icon-edit-outline"
                     size="mini"
                     plain
                     @click="codeMaitain(scope.row,scope.index)">代码编辑
          </el-button>
        </template>
      </avue-crud>
      <el-dialog title="代码编辑" width="80%" style="height: 100%;" lock-scroll  :visible.sync="codeMirrorVisible">
        <codeMirrorEdit style="height: 100%" v-bind:selectRecord="selectRecord" @par="closeCodeMaitainDialog" ></codeMirrorEdit>
      </el-dialog>
      <el-dialog title="历史版本" width="80%" style="height: 100%;" lock-scroll  :visible.sync="templateCodeHisVisible" :before-close="closeTemplateCodeHisDialog">
        <codeTemplateHis style="height: 100%" v-bind:selectRecord="selectRecord" @par="closeTemplateCodeHisDialog" ></codeTemplateHis>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
  import { fetchList, getObj, addObj, putObj, delObj } from '@/api/code-template'
  import { tableOption } from '@/const/crud/code-template'
  import { mapGetters } from 'vuex'
  import codeMirrorEdit from  './code-mirror'
  import codeTemplateHis from '../code-template-his/index'
  export default {
    name: 'codeTemplate',
    components: { codeMirrorEdit ,codeTemplateHis},
    data() {
      return {
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        codeMirrorVisible:false,
        templateCodeHisVisible:false,
        tableLoading: false,
        tableOption: tableOption,
        selectRecord:null
      }
    },
    watch:{
      'form.templateGroupId':{
        handler(val){

        },
        immediate: true
      }
    },
    created() {
    },
    mounted: function() { },
    computed: {

    },
    methods: {
      closeCodeMaitainDialog: function(reloadTable){
        this.codeMirrorVisible = false
        this.refreshChange()
      },
      closeTemplateCodeHisDialog: function(){
        this.templateCodeHisVisible = false
        this.refreshChange()
      },
      codeMaitain: function(row, index) {
        this.selectRecord = row
        this.codeMirrorVisible = true
      },
      showTemplateCodeHisDialog: function(row, index) {
        this.selectRecord = row
        this.templateCodeHisVisible = true
      },
      getList(page, params) {
        this.tableLoading = true
        if (!params) {
          try {
            params = this.$refs.crud.searchForm
            if (!params) params = this.$refs.crud.$children[0].searchForm
          } catch (ex) {}
        }
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params)).then(response => {
          this.tableData = response.data.records
          this.page.total = response.data.total
          this.tableLoading = false
        })
      },
      /**
       * @title 打开新增窗口
       * @detail 调用crud的handleadd方法即可
       *
       **/
      handleAdd: function() {
        this.$refs.crud.rowAdd()
      },
      handleEdit(row, index) {
        this.$refs.crud.rowEdit(row, index)
      },
      handleDel(row, index) {
        this.$refs.crud.rowDel(row, index)
      },
      rowDel: function(row, index) {
        var _this = this
        this.$confirm('是否确认删除ID为' + row.id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function() {
            return delObj(row.id)
          }).then(data => {
          _this.tableData.splice(index, 1)
          _this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          this.getList(this.page)
        }).catch(function(err) { })
      },
      /**
       * @title 数据更新
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       * @param done 为表单关闭函数
       *
       **/
      handleUpdate: function(row, index, done) {
        putObj(row).then(data => {
          this.tableData.splice(index, 1, Object.assign({}, row))
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          done()
          this.getList(this.page)
        })
      },
      /**
       * @title 数据添加
       * @param row 为当前的数据
       * @param done 为表单关闭函数
       *
       **/
      handleSave: function(row, done) {
        addObj(row).then(data => {
          this.tableData.push(Object.assign({}, row))
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          done()
          this.getList(this.page)
        })
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getList(this.page)
      },
      searchChange(form, done) {
        this.getList(this.page, form)
        done()
      }
    }
  }
</script>

<style lang="scss">
  .el-dialog .el-dialog__body {
    padding: 0px 0px;
  }

</style>
